<template>
  <div class="Recommended-route">
    <div :key="index" @click="open(item)" v-for="(item,index) in flights" class="bg-white ub ub-ac tuijian font-color-black ticket-border bottom-height">
      <div class="ub ub-ver margin-l1">
        <div class="f16 font-color-black ub ub-ac">
          <span>{{item.monStart}}</span><img class="img-f1y" src="./../flights/flyto.png">
          <span>{{item.monEnd}}</span>
        </div>
        <div class="f12 font-color-888">
          <span>{{getTime(item.monStartDate)}}</span> ~
          <span>{{getTime(item.monEndDate)}}</span>
        </div>
      </div>
      <div class="ub ub-f1"></div>
      <div class="ub ub-ver ub-ac ub-pe  margin-r1">
        <div>
          <span class="bc-ff9d00 f16">
            <span>￥</span>
            <span>60</span>
          </span>
          <span class="f12 font-color-888">起</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { mapState } from 'vuex';
export default {
  data: () => {
    return {
      flights: []
    }
  },
  created: function () {
    let self = this;
    this.passengerType = this.passenger.passengerPage;
    this.$store.commit('changeHeader', {
      left: '返回',
      right: '',
      middle: '促销',
      ifshow: true,
      leftAction: '-1',
      leftIcon: 'leftIcon',
      rightAction: '',
      rightIcon: ''
    });
    let content = {
      'pageNo': 1,
      'pageSize': 10
    }
    let data = this.$utils.getUserContent(content);
    this.$store.commit('showLoading');
    this.$http.post(this.$RS.recommend, data).then(
      function (res) {
        // 响应成功回调
        self.$store.commit('closePop');
        res = res.body
        console.log(res)
        if (res.code === 1000) {
          self.flights = res.content.list;
        } else {
          console.log('out');
          self.$store.commit('closePop');
          self.$store.dispatch('showTx', { text: res.message });
        }
      },
      function (err) {
        // 响应错误回调
        this.$store.commit('closePop');
        self.$store.dispatch('showTx', { text: err.message || '网络错误，请重试' });
      }
    );
  },
  methods: {
    open: function (item) {
      let nowDate = new Date();
      let today = nowDate.getFullYear() + '-' + ((nowDate.getMonth() + 1) < 10 ? '0' + (nowDate.getMonth() + 1) : (nowDate.getMonth() + 1)) + '-' + (nowDate.getDate() < 10 ? '0' + nowDate.getDate() : nowDate.getDate())
      let sContent = {
        adt: '1',
        cnn: '0',
        inf: '0',
        beginDate: today,
        beginCity: item.monStartCode,
        beginCityName: item.monStart,
        backDate: '',
        endCity: item.monEndCode,
        endCityName: item.monEnd,
        type: '1'
      }
      this.$store.commit('setSearchOpt', sContent);
      this.$store.commit('setPassengerNum', { adt: '1', cnn: '0', inf: '0' }) // 保存选择人数
      this.$router.push('/airTicketBookingResult');
    },
    getTime: function (time) {
      let date = new Date(time)
      let timestr = date.getFullYear() + '-' + ((date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1)) + '-' + (date.getDate() < 10 ? '0' + date.getDate() : date.getDate())
      console.log(timestr)
      return timestr;
    }
  },
  computed: mapState(['loginData', 'passenger'])
}
</script>

<style lang="stylus">
@import '../../stylus/base.styl';
.font-color-black
  color: #333;
.bg-white
  background-color: #fff;
.bottom-height
  height: f_times(3.5);
.ticket-border
  border-bottom: 1px solid #e0e0e0;
.margin-l1
  margin-left: f_times(0.7);
.margin-r1
  margin-right: f_times(0.7);
.font-color-888
  color: #888;
.img-f1y
  width: f_times(0.9);
  padding-left: f_times(0.35);
  padding-right: f_times(0.35);
.f12
  font-size: f_times(0.8);
  margin-top: f_times(0.5);
.bc-ff9d00
  color: #ff9d00;
.f16
  font-size: f_times(1.1);
</style>